<template>
    <div class="newsinfo-container">
      <h3 class="title">{{ newsInfo.title }}</h3>
      <p class="subtitle">
        <span class="published">发表时间：2012-12-12 12:12:12</span>
        <span class="one">点击：0次</span>
      </p>

      <div class="content" v-html="newsInfo.content"></div>

      <!-- 评论子组件区域 -->
      <Comment/>
    </div>
</template>

<script>
    import Comment from '../subcomponents/comment'
    export default {
        name: "newsInfo",
        data () {
          return {
            id: this.$route.params.id,  // 将 URL 地址中传递过来的 Id值，挂载到 data上，方便以后调用
            newsInfo: {} // 新闻对象
          }
        },
        created () {
          this.getNewsInfo()
        },
        methods: {
          getNewsInfo() {
            this.$axios.get('sxtstu/blueberrypai/getIndexBanner.php')
              .then(res => {
                this.newsInfo = res.data.banner[0];
                console.log(res.data.banner[0]);
                // this.banners = this.data;
              })
              .catch(error => {
                Toast("获取新闻内容失败!");
              })
          }
        },
        components: {
          Comment
        }
    }
</script>

<style scoped>
  .newsinfo-container {
    padding: 0 4px;
  }
  .title {
    font-size: 16px;
    text-align: center;
    margin: 15px 0;
    color: red;
  }
  .subtitle {
    width: 100%;
    height: 30px;
    font-size: 13px;
    color: #226aff;
    border-bottom: 1px solid #ccc;
  }
  .published {
    float: left;
    font-size: 12px;
    color: #226aff;

  }
  .one {
    float: right;
    font-size: 12px;
    color: #226aff;
  }
</style>
